<template>
  <div>
    <h2>会员列表新增</h2>
    <a href="/show">返回列表</a>
    <table class="table">
      <tbody>
        <tr>
          <td>姓名</td>
          <td><input type="text" v-model="data.memberName"/></td>
        </tr>
        <tr>
          <td>密码</td>
          <td><input type="password" v-model="data.password"/></td>
        </tr>
        <tr>
          <td>年龄</td>
          <td>
            <input type="radio" value="1" name="age" checked  v-model="data.age"/>男
            <input type="radio" value="2" name="age" v-model="data.age"/>女
          </td>
        </tr>
        <tr>
          <td>图片</td>
          <td>
            <input type="file" @change="Img"/>
            <img :src="'https://localhost:7079/'+data.imgUrl" style="height: 100px; width: 100px;" />
          </td>
        </tr>
        <tr>
          <td>会员等级</td>
          <td>
            <select v-model="data.memberLevelid">
              <option value="0">请选择会员等级</option>
              <option value="1">青铜会员</option>
              <option value="2">白银会员</option>
            </select>
          </td>
        </tr>
        <tr>
          <td>爱好</td>
          <td>
            <span v-for="d in hao">
               <input v-model="h" type="checkbox" :value="d">{{ d }}
            </span>
          </td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="button" value="添加" @click="add">
            </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router'

const router=useRouter();

const Img=(e:any)=>{
    var f = e.target.files[0]
    var fd = new FormData()
    fd.append('file',f)
    debugger
    
    if(f.size>1024*1024*2)
    {
         alert("图片大小不能超过2MB")
         return;
    }
    if(f.type!="image/png"&& f.type!="image/jpeg")
    {
          alert("图片类型要是png/jpeg类型")
          return;
    }
    

    axios.post("https://localhost:7079/api/Img",fd).then(res=>{
        data.value.imgUrl=res.data
    })
}


const hao=ref(["画画","游泳","登山"])

const h=ref([])

const data=ref({
  "id": 0,
  "memberName": "",
  "password": "",
  "age": 0,
  "isDelete": true,
  "imgUrl": "",
  "memberLevelid": 0,
  "houbbyCount": 0,
  "houbbyString": "",
  "createData": "2025-04-10T12:34:01.276Z"
})

const add=()=>{
    data.value.houbbyString=h.value.toString();
    data.value.houbbyCount=h.value.length
    axios.post("https://localhost:7079/api/Member/AddMember",data.value).then(res=>{
        if(res.data>0)
    {
       alert("添加成功")
       router.push({path:"/show"})
       return;
    }
    else{
        alert("添加失败")
        return;
    }
    })
} 

</script>

<style scoped></style>
